<!--  -->
<template>
    <div class="app-container">
        <div>
            <router-link to="/shop/goods">
                <el-button type="text" icon="el-icon-arrow-left" size="default">返回</el-button>
            </router-link>
            <el-button
                style="margin-left:20px;margin-bottom: 15px"
                icon="el-icon-search"
                type="primary"
                size="small"
                @click
                >导出</el-button
            >
            <el-button class="ref-btn" icon="el-icon-refresh" circle @click></el-button>
            
        </div>

        <el-table :data="tableData" border stripe>
            <el-table-column type="selection" width="60" align="center"></el-table-column>

            <template v-for="(i, index) in columns">
                <el-table-column
                    v-if="index == 9"
                    :key="i.id"
                    :label="i.label"
                    show-overflow-tooltip
                    align="center"
                    :width="i.width"
                >
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.isHome"
                            :active-value="1"
                            :inactive-value="2"
                            @change
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    v-else-if="index == 11"
                    :key="i.id"
                    :label="i.label"
                    show-overflow-tooltip
                    align="center"
                    :width="i.width"
                >
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.isUsed"
                            :active-value="1"
                            :inactive-value="0"
                            @change
                        ></el-switch>
                    </template>
                </el-table-column>

                <el-table-column
                    v-else
                    show-overflow-tooltip
                    :prop="i.data"
                    :key="i.id"
                    :label="i.label"
                    align="center"
                    :width="i.width"
                />
            </template>
            <el-table-column align="center" label="操作" width="230">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="">取消置顶</el-button>
                    <el-button type="text" icon="el-icon-chat-square" @click="record(scope.row)"
                        >回复</el-button
                    >
                    <el-button
                        type="text"
                        icon="el-icon-delete"
                        style="color: #f66"
                        @click="del(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page.sync="page"
                :page-sizes="[20, 40, 80, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
            ></el-pagination>
        </div>

        <!-- 对话框 -->
        <el-dialog title="回复" :visible.sync="showDialog" width="40%" @close="showDialog = false">
            <el-form v-model="form" label-width="120px" :inline="false" size="normal">
                <el-form-item label="回复内容">
                    <el-input
                        v-model="form.content"
                        style="width: 350px"
                        type="textarea"
                    ></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button type="primary" @click>确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "slider",
    data () {
        return {
            mId: "",
            mName: "",
            status: "",
            keyword: "",

            page: 1,
            limit: 10,
            total: 10,
            queryId: "",
            dialogTitle: "创建",
            showDialog: false,
            form: {},
            tableData: [
                {
                    id: "1",
                    name: "测测额",
                    percent: "1%",
                    member: "20",
                    student: "30",
                    price: "40",
                    blong: "商品分类1",
                    classify: "实体",
                    cover: "11",
                    isHome: 1,
                    count: "2222",
                    isUsed: 1,
                },
                {
                    id: "2",
                    name: "测测额",
                    percent: "1%",
                    member: "20",
                    student: "30",
                    price: "40",
                    blong: "商品分类1",
                    classify: "实体",
                    cover: "11",
                    isHome: 1,
                    count: "2222",
                    isUsed: 1,
                },
                {
                    id: "3",
                    name: "测测额",
                    percent: "1%",
                    member: "20",
                    student: "30",
                    price: "40",
                    blong: "商品分类1",
                    classify: "实体",
                    cover: "11",
                    isHome: 1,
                    count: "2222",
                    isUsed: 1,
                },
            ],

            columns: [
                { key: 0, label: `评论编号`, data: "id", width: "75" },
                { key: 1, label: `用户昵称`, data: "name", width: "120" },
                { key: 2, label: `头像`, data: "percent", width: "120" },
                { key: 3, label: `评论内容`, data: "member" },
                { key: 4, label: `评论类别`, data: "student" },
                { key: 5, label: `评论时间`, data: "price" },
            ],
            artQuery: {
                id: "1",
            },
        };
    },
    created () { },
    methods: {
        add () {
            this.form = {
                subTime: "",
                subShop: "",
                subCount: "",
                subPayment: 1,
            };
            this.showDialog = true;
        },
        record (i) {
            this.form = {
                subTime: i.bTime,
                subShop: i.shop,
                subCount: i.bCount,
                subPayment: i.payment,
            };
            this.showDialog = true;
        },
        del (i, d) {
            this.$confirm("确认删除所选数据？", "确认删除", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.tableData.splice(i, 1);
                })
                .catch(() => { });
        },

        sizeChange () { },
        currentChange () { },
    },
};
</script>
<style scoped>
.slideImg {
    width: 140px;
}
</style>
